<!-- 提现 -->
<template>
	<view class="cash">
		<view class="bg">
			<Header :isShowRight="false" title="提现" @back="back" />
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/bg2.png"></image>
			<!-- #ifdef APP-PLUS -->
			<view style="height: 82rpx;"></view>
			<!-- #endif -->
			<view class="inner">
				<view class="topText">可提现金额（元）</view>
				<view class="money"><text class="txt">￥</text>{{money}}</view>
			</view>
		</view>
		<view class="content">
			<view class="title">提现金额</view>
			<view class="input">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/img6.png"></image>
				<u--input :maxlength="maxlength" type="number" clearable placeholder="请输入提现金额" @input="insertMoney"
					border="none" v-model.trim="cashMoney"></u--input>
				<view @click="allCash">全部提现</view>
			</view>
			<view class="info" @click.stop="show = true">
				<view class="left">提现至</view>
				<view class="right">
					<image :src="payList[current].ico" mode='aspectFit'></image>
					<text>{{payList[current].name}}</text>
				</view>
			</view>
			<view class="notice">请上传{{payList[current].name}}收款码</view>
			<view class="upload">
				<u-upload :fileList="imgs" @afterRead="afterRead" @delete="deletePic" class="box" name="money"
					:maxCount="1" width="206" height="206">
					<view class="add">＋</view>
				</u-upload>
			</view>

			<view class="submit" @click="cashApply">申请提现</view>
		</view>

		<u-modal :show="showInfo" :title="'申请成功!	'" @cancel="handlerModal" @confirm="handlerModal"
			:showCancelButton="true">
			<template #default>
				<view class="modal">工作人员将在1-3个工作日审核</view>
			</template>
		</u-modal>
		<!-- 支付方式 -->
		<u-popup :show="show" @close="show=false" @open="show=true" round="30">
			<view class="pay">
				<view class="cell" v-for="(cell,idx) in payList" :key="idx" @click="cashType(idx)">
					<image class="ico" :src="cell.ico" mode="aspectFit"></image>
					<text class="txt">{{cell.name}}</text>
					<u-icon v-if="idx ==current" class="ok" name="checkbox-mark" color="#194FC9" size="42"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getEarnings,
		incomeDetails,
		extractApply
	} from '@/apis/apis.js'
	import {
		uploadFileFn
	} from '@/utils/uploadFile.js'
	import Header from '@/components/c_header.vue';
	export default {
		components: {
			Header
		},
		data() {
			return {
				type: null,
				money: '', // 可提现金额
				cashMoney: null,
				imgs: [],
				qrCode: "",
				showInfo: false,
				show: false, // 提现到
				current: 0, // （0:微信,1:支付宝）
				maxlength: -1,
				payList: [{
						name: "微信",
						ico: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/wechat.png'
					},
					// #ifdef APP-PLUS
					{
						name: "支付宝",
						ico: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/alipay.png'
					}
					// #endif
				],
				timer: null,
				isBack1: false, //提现成功返回创作中心并刷新
				isBack2: false, //提现成功返回收益并刷新
			}
		},
		onLoad(options) {
			console.log(options);
			//	账户类型（1：邀请收益，2：创作收益）
			this.type = options.type ? options.type : null
			this.isBack1 = options.isBack1 ? options.isBack1 : false
			this.isBack2 = options.isBack2 ? options.isBack2 : false
			this.init()
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			}
		},
		methods: {
			init() {
				if (this.type == 1) {
					// 邀请收益
					incomeDetails().then(res => {
						console.log(res)
						this.info = res.data
						this.money = res.data.shareValidIncome
					})
				} else if (this.type == 2) {
					//创作收益
					getEarnings().then(res => {
						console.log(res)
						this.info = res.data
						this.money = res.data.produceValidIncome
					})
				}
			},
			insertMoney(v) {
				if (v > this.money) {
					uni.showToast({
						title: '超出最大可提现额度',
						icon: 'none'
					})
					this.$nextTick(() => {
						this.cashMoney = null
					})
					return
				}
				// 只能输入小数点后两位
				let reg = /^[0-9]+(.[0-9]{1,1})?$/
				if (!reg.test(v)) {
					this.maxlength = v.length
					return
				}
			},
			// 点击全部提现
			allCash() {
				if (this.money > 0) {
					this.cashMoney = this.money
				}
			},
			// 提现的方式
			cashType(e) {
				this.current = e
				this.show = false
			},
			// 提现
			cashApply() {
				const boo = this.validation()
				if (!boo) return
				let data = {
					accountType: this.type, // 1：邀请收益，2：创作收益
					cashAccount: this.current, //	提现账户（0:微信,1:支付宝）
					cashMoney: this.cashMoney, //金额
					collectionCode: this.qrCode // 收款码
				}
				extractApply(data).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.showInfo = true
						// this.timer=setTimeout(()=>{
						// 	if(this.isBack1){
						// 		uni.navigateTo({
						// 			url:'/pages/mine/views/create/auditStatus'
						// 		})
						// 	}
						// 	if(this.isBack2){
						// 		uni.navigateTo({
						// 			url:'/pages/mine/views/yield/detail?current='+'yj'
						// 		})
						// 	}

						// },1000)
						this.init()
					}
				})
			},
			// 校验
			validation() {
				if (!this.cashMoney) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return
				}
				if (!this.qrCode) {
					uni.showToast({
						title: '请上传收款码',
						icon: 'none'
					})
					return
				}
				return true
			},
			// 上传图片
			afterRead(e) {
				console.log(e)
				let params = {
					path: e.file.url
				}
				uploadFileFn(params).then(res => {
					this.qrCode = JSON.parse(res).url
					this.imgs.push({
						url: JSON.parse(res).url
					})
				})
			},
			handlerModal() {
				this.showInfo = false
				this.cashMoney = null
				this.imgs = []
				this.init()
				this.timer = setTimeout(() => {
					if (this.isBack1) {
						uni.navigateTo({
							url: '/pages/mine/views/create/auditStatus'
						})
					}
					if (this.isBack2) {
						uni.navigateTo({
							url: '/pages/mine/views/yield/detail?current=' + 'yj'
						})
					}
					// this.init()
				}, 1000)
				this.$forceUpdate()
			},
			deletePic(e) {
				this.imgs = [];
			},
			back() {
				uni.navigateBack(0)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cash {
		height: 100vh;
		background-color: #f8f8f8;

		.bg {
			position: relative;
			width: 100%;
			background: linear-gradient(180deg, #40B7FF, #369CFE);
			border-radius: 0 0 30rpx 30rpx;
			padding-bottom: 30rpx;

			&>image {
				position: absolute;
				top: 120rpx;
				right: 30rpx;
				width: 250rpx;
				height: 250rpx;
			}

			.inner {
				padding: 74rpx 50rpx 43rpx 50rpx;

				.topText {
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.money {
					font-size: 70rpx;
					font-weight: 500;
					color: #FFFFFF;

					.txt {
						font-size: 26rpx;
					}
				}
			}

		}

		.content {
			position: absolute;
			top: 340rpx;
			left: 50%;
			width: 690rpx;
			background-color: #fff;
			border-radius: 20rpx;
			transform: translateX(-50%);
			padding: 50rpx 26rpx 56rpx;

			.title {
				pading-left: 14rpx;
				font-size: 30rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #1A1A1A;
				margin-bottom: 76rpx;
			}

			.input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #E9E9E9;
				margin-bottom: 52rpx;

				image {
					width: 36rpx;
					height: 44rpx;
					margin-right: 28rpx;
				}

				&>view {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #194FC9;
					margin-left: 30rpx;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 54rpx;

				.right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;

					image {
						width: 46rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}
				}

			}

			.notice,
			.info>.left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2F2F2F;
			}

			.upload {
				height: 206rpx;
				margin: 46rpx 0 80rpx;

				.box {
					width: 206rpx;
					height: 206rpx;
					text-align: center;
					line-height: 206rpx;
					background-color: rgb(246, 246, 246);
				}

				.add {
					width: 206rpx;
					height: 206rpx;
					font-size: 100rpx;
					color: rgb(207, 207, 207);
				}
			}

			.submit {
				background: #194FC9;
				width: 636rpx;
				height: 90rpx;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
		}

		.modal {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}



	.pay {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;

		.cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 30rpx 60rpx;
			border-bottom: 1rpx solid #E9E9E9;

			.ico {
				display: block;
				width: 42rpx;
				height: 42rpx;
				margin: 0 10rpx;
			}

			.txt {
				font-size: 40rpx;
			}

			.ok {
				position: absolute;
				right: 10%;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	::v-deep .u-upload__deletable {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #373737;
		height: 40rpx;
		width: 40rpx;
		display: flex;
		flex-direction: row;
		border-bottom-left-radius: 200rpx;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}
	::v-deep .u-upload__deletable__icon{
		    position: absolute;
		    top: 0;
		    right: 0;
		    top: 10rpx;
		    right: -6rpx;
	}
	::v-deep .u-icon__icon {
		font-size: 44rpx !important;
	}
</style>
